<template>
  <div id="personal">
    <div class="header_bg">
      <img src="/static/imgs/my-bg.png" alt />
    </div>
    <div class="header_wrap">
      <div class="header_top">
        <van-uploader @afterread="headerUp" max-count="1" upload-text="头像" v-model="fileList">
          <div class="round">
            <img :src="fnobjlist.avatar" alt v-if="fnobjlist.avatar" />
            <img src="/static/imgs/imgmyTx.png" alt v-else-if="isLogin" />
            <img src="/static/imgs/imgmyTx2.png" alt v-else />
          </div>
        </van-uploader>
        <!-- 如果登录了 -->
        <template v-if="isLogin">
          <div class="name_center">
            <span class="name">
              {{fnobjlist.real_name}}
              <img src="/static/imgs/1.png" alt v-if="fnobjlist.sex=='1'" />
              <img src="/static/imgs/1.png" alt v-if="fnobjlist.sex=='2'" />
            </span>
            <span
              class="level"
            >✓{{fnobjlist.level == 0?'实习嘉宾':fnobjlist.level == 10?'初级嘉宾':fnobjlist.level == 20?'中级嘉宾':fnobjlist.level == 30?'高级嘉宾':'特邀嘉宾'}}</span>
          </div>
          <div class="phone">{{fnobjlist.mobile}}</div>
          <div class="score">
            <span class="jifen">积分</span> 12000
          </div>
        </template>
        <template v-else>
          <div class="login">
            <van-button
              color="linear-gradient(to right, #2eb3fb, #195bfc)"
              @click="login()"
              round
            >登录</van-button>
          </div>
        </template>
      </div>
    </div>
    <div class="every_one one" @click="toHref('/pages/personalDetail/main')">
      <img mode="widthFix" src="/static/imgs/my/personal.png" alt />
      <span class="title">个人信息</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one" @click="toHref('/pages/realName/main')">
      <img mode="widthFix" src="/static/imgs/my/realname.png" alt />
      <span class="title">实名认证</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one top" @click="toHref('/pages/myreport/main')">
      <img mode="widthFix" src="/static/imgs/my/report.png" alt />
      <span class="title">我的报告</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one top" @click="toHref('/pages/cardBag/main')">
      <img mode="widthFix" src="/static/imgs/my/card.png" alt />
      <span class="title">卡包</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one" @click="toHref('/pages/mybill/main')">
      <img mode="widthFix" src="/static/imgs/my/bill.png" alt />
      <span class="title">账单</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one" @click="toHref('/pages/inviteFriends/main')">
      <img mode="widthFix" src="/static/imgs/my/invite.png" alt />
      <span class="title">邀请好友</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one top" @click="toHref('/pages/setupthe/main')">
      <img mode="widthFix" src="/static/imgs/my/setting.png" alt />
      <span class="title">设置</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one" @click="toHref('/pages/helpcenter/main')">
      <img mode="widthFix" src="/static/imgs/my/help.png" alt />
      <span class="title">帮助中心</span>
      <span class="icon">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="zanwei"></div>
    <van-popup :show="pShow">
      <notLoginModel @noLogin="pShow = false"></notLoginModel>
    </van-popup>
  </div>
</template>
<script>
import getUserInfo from "../../utils/getUserInfo";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";
import notLoginModel from "@/common/components/notLoginModel";
export default {
  components: {
    notLoginModel
  },
  async onShow() {
    if (
      typeof this.$root.$mp.page.getTabBar === "function" &&
      this.$root.$mp.page.getTabBar()
    ) {
      this.$root.$mp.page.getTabBar().setData({
        activeIndex: 2 //对应页面的index
      });
    }
    this.fnobjlist = wx.getStorageSync("userInfo");
    // 通过openId 去本地缓存查看是否有用户缓存数据
    let openid = await getStorage("openid");
    let userInfo = await getStorage(openid);
    this.isLogin = wx.getStorageSync("userInfo").token && true;
    if (userInfo) {
      // 本地有缓存数据
      this.userInfo = userInfo;
    } else {
      // wx.getUserInfo获取用户登录信息
      let result = await getUserInfo();
      this.userInfo = result.userInfo;
      // 通过openId将对应的用户信息缓存到本地
      setStorage(this.openid, userInfo);
    }
  },
  data() {
    return {
      fnobjlist: {}, // 获取信息
      userInfo: {},
      openid: "",
      fileList: [],
      isLogin: false,
      pShow: false
    };
  },
  methods: {
    /**
     * 跳转到登录页面
     */
    login() {
      wx.navigateTo({
        url: "/pages/firstView/main"
      });
    },
    async handleGetUserInfo() {
      let result = await getUserInfo();
      this.userInfo = result.userInfo;
      // 通过openId将对应的用户信息缓存到本地
      let openid = await getStorage("openid");
      setStorage(openid, this.userInfo);
    },
    async getCollections() {
      let openId = await getStorage("openid");
      let userInfo = await getStorage(openId);

      // 判断用户是否授权登录
      if (!userInfo) {
        // 如果没有登录提示用户登录
        wx.showToast({
          title: "请先登录",
          icon: "none"
        });
      } else {
        // 登录以后发送请求获取对应收藏的文章列表，跳转页面
        // 获取用户收藏的文章
        let collectionsResult = await get("/getCollections", {
          userOpenId: openId
        });
        wx.navigateTo({
          url:
            "/pages/bookList/main?booksList=" +
            JSON.stringify(collectionsResult)
        });
      }
    },
    //  头像上传
    headerUp(event) {
      this.urlTobase64(event.mp.detail.file.path);
      this.fnobjlist.avatar = event.mp.detail.file.path;
    },
    urlTobase64(url) {
      wx.request({
        url: url,
        responseType: "arraybuffer", //最关键的参数，设置返回的数据格式为arraybuffer
        success: res => {
          //把arraybuffer转成base64
          let base64 = wx.arrayBufferToBase64(res.data);
          //不加上这串字符，在页面无法显示的哦
          base64 = "data:image/jpeg;base64," + base64;
          //打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
          this.$http
            .post({
              url: "/mobile/api/uploadfile",
              data: {
                customer_id: wx.getStorageSync("userInfo").customer_id,
                files: base64
              }
            })
            .then(res => {
              if (res.code == "RX0000") {
                this.$http
                  .post({
                    url: "/mobile/api/edituserinfo",
                    data: {
                      customer_id: wx.getStorageSync("userInfo").customer_id,
                      avatar: res.data.access_path
                    }
                  })
                  .then(res => {
                    if (res.code == "RX0000") {
                      Toast("头像修改成功");
                    } else {
                      wx.showToast({
                        title: res.data
                      });
                    }
                  });
              } else {
                wx.showToast({
                  title: res.data
                });
              }
            });
        }
      });
    },
    //  跳转
    toHref(url) {
      if (this.isLogin) {
        wx.navigateTo({
          url: url
        });
      } else {
        this.pShow = true;
      }
    }
  }
};
</script>
<style lang="less">
#personal {
  background: #f9f9f9;
  height: 100vh;
  position: relative;
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    margin-top: 10px;
    .van-button {
      height: auto;
      margin-left: 8px;
    }
  }
  .header_bg {
    width: 100%;
    height: 120px;
    & > img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .header_wrap {
    position: absolute;
    top: 60px;
    width: 100%;
    padding: 0 7px;
    box-sizing: border-box;
    .header_top {
      height: 123px;
      margin: 0 auto;
      background: url("../../../static/imgs/xinxibg.png") no-repeat;
      background-size: 100% 100%;
      .van-uploader {
        position: relative;
        display: inline-block;
        top: -20px;
        left: -10px;
      }
      .round {
        width: 48px;
        height: 48px;
        position: absolute;
        top: -5px;
        left: 172px;
        & > img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          border-radius: 50%;
          // border: 1px solid #ccc;
        }
      }
      .name_center {
        margin-left: 100px;
        padding-top: 20px;
        & > span {
          display: inline-flex;
          align-items: center;
        }
        .name {
          margin-left: 58px;
          color: #000;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
        }
        .level {
          color: red;
          font-size: 14px;
          margin-left: 11px;
        }
      }
      .phone {
        color: #666666;
        font-size: 12px;
        margin-top: 6px;
        text-align: center;
      }
      .score {
        width: 112px;
        height: 36px;
        line-height: 36px;
        color: #226df0;
        font-size: 14px;
        text-align: center;
        margin: 0 auto;
        .jifen {
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
  .every_one {
    margin: 0 7px;
    margin-top: 2px;
    height: 50px;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: 1;
    > img {
      width: 15px;
      // height: 15px;
    }
    &.one {
      margin-top: 75px;
    }
    & > span {
      display: inline-block;
    }
    .icon {
      & > .p {
        color: #f68959;
      }
      & > .f {
        color: #31bbd2;
      }
      & > .r {
        color: #ccc;
      }
      & > .z {
        color: #f6bc59;
      }
      & > .b {
        color: #195bfc;
      }
      & > .k {
        color: #ef7c3d;
      }
      & > .d {
        color: #eb7634;
      }
      & > .s {
        color: #f6b759;
      }
    }
    .title {
      text-align: left;
      font-size: 14px;
      flex: 1;
      margin-left: 10px;
    }
    &.top {
      margin-top: 10px;
    }
  }
}
.name {
  img {
    width: 15px;
    height: 15px;
  }
}
.zanwei {
  width: 100%;
  height: 144rpx;
}
</style>
